<template>
  <!-- 此页面后期可修改成 qq联系人 页面 -->

  <div class="contact flex justify-center items-center w-full">
    <div class="outBorder" :style="{ backgroundImage: `url(${personalData.bgImg})` }">
      <div class="flex justify-between m-10">
        <img class="logo mr-10" src="/imgs/line-chat-w.png" />
        <el-icon size="20" @click="close" class="cursor-pointer">
          <Close />
        </el-icon>
      </div>

      <!-- 头像，名称，个性签名 -->
      <div class="flex mt-10 mb-15 ml-10 mr-10">
        <el-avatar class="mr-13" size="large" :src="personalData.avatar" icon="UserFilled" />
        <div class="flex justify-center flex-col pb-10">
          <div class="nickName">
            {{ personalData.nickName }}
          </div>
          <div class="intro">
            {{ personalData.intro }}
          </div>
        </div>
      </div>

      <div class="container">
        <tabs :editableTabs.sync="editableTabs">
          <!-- Your custom tab rendering with slot -->
          <template v-slot:tab="{ label }">
            <div v-if="label == 'Tab1'">
              <router-link to="/friends">好友</router-link>
            </div>
            <div v-if="label == 'Tab2'">
              <router-link to="/groups">群聊</router-link>
            </div>
          </template>
        </tabs>

        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
let router = useRouter();

import tabs from "@/components/sangongUI/tabs.vue";
import { ref } from "vue";
const editableTabs = ref(["Tab1", "Tab2"]);

let personalData = JSON.parse(sessionStorage.getItem("personalData") as any)[0];

/* 返回登录页 */
const close = () => {
  router.push({ path: "/login" });
};
</script>

<style lang="sass" scoped>
/* 边框颜色 */
$borderColor: #ebebeb
/* 最外层高度 */
$outHeight: 750px

.contact
  height: 100vh
  .outBorder
    border: 1px solid
    border-radius: 5px
    border-color: $borderColor

    
    min-width: 300px

    background-size: 100% 100%
    background-repeat: no-repeat

    .name
      flex: 1
      font-size: 18px
      font-weight: bold

    .intro
      font-size: 12px

.container
  background: #ffffff
  opacity:0.9
  min-height: $outHeight - 200px
  border-radius: 0 0 3px 3px

.logo
  width: 20px
  height: 20px
</style>
